<template>
  <div class="person" slot="body">
    <HeaderByPerson></HeaderByPerson>

    <el-card class="box-card">
      <el-row>
        <el-col :span="4">
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo">
            <el-menu-item index="1" @click="change_index('1')">
              <i class="el-icon-menu"></i>
              <span slot="title">我的信息</span>
            </el-menu-item>
            <el-menu-item index="2" @click="change_index('2')">
              <i class="el-icon-edit-outline"></i>
              <span slot="title">修改密码</span>
            </el-menu-item>
            <el-menu-item index="3" @click="change_index('3')">
              <i class="el-icon-setting"></i>
              <span slot="title">隐私设置</span>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="16" style="margin: 20px">
          <div v-if="menu_index==='1'">
            <el-button v-show="!update_form_button" @click="update_form_button=true" size="mini" style="float: right">
              点击修改
            </el-button>
            <el-button v-show="update_form_button" @click="submit_user" type="primary" size="mini" style="float: right">
              保存
            </el-button>
            <el-button v-show="update_form_button" @click="update_form_button=false" size="mini" style="float: right">
              返回
            </el-button>
            <br><br>
            <el-form ref="user_form" v-if="!update_form_button" :model="user_form" label-width="150px">
              <el-form-item style="margin-left: 230px">
                <img
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  style="width: 120px;height: 120px; cursor: pointer;border-radius: 50%"/>
              </el-form-item>
              <el-form-item label="姓名">
                <el-input disabled v-model="user_form.name"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-input disabled v-model="user_form.gender_text"></el-input>
              </el-form-item>
              <el-form-item label="出生日期">
                <el-date-picker disabled v-model="user_form.birth" style="width: 100%;"></el-date-picker>
              </el-form-item>
              <el-form-item label="手机号">
                <el-input disabled v-model="user_form.phone"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input disabled v-model="user_form.email"></el-input>
              </el-form-item>
              <el-form-item label="QQ">
                <el-input disabled v-model="user_form.qq"></el-input>
              </el-form-item>
              <el-form-item label="微信">
                <el-input disabled v-model="user_form.wechat"></el-input>
              </el-form-item>
              <el-form-item label="个人介绍">
                <el-input disabled type="textarea" v-model="user_form.remark"></el-input>
              </el-form-item>
            </el-form>
            <el-form ref="user_form" v-if="update_form_button" :model="user_form" label-width="150px">
              <el-form-item style="margin-left: 230px">
                <img @click="dialogVisible = true"
                     src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                     style="width: 120px;height: 120px; cursor: pointer;border-radius: 50%"/>
                <el-dialog
                  title="上传头像"
                  :visible.sync="dialogVisible"
                  width="30%">
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="true"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                  </span>
                </el-dialog>
              </el-form-item>
              <el-form-item label="姓名">
                <el-input v-model="user_form.name"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="user_form.gender">
                  <el-radio label="1">男</el-radio>
                  <el-radio label="2">女</el-radio>
                  <el-radio label="0">保密</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="出生日期">
                <el-date-picker type="date" placeholder="选择日期"
                                v-model="user_form.birth"
                                value-format="yyyy-MM-dd"
                                style="width: 100%;"></el-date-picker>
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="user_form.phone"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="user_form.email"></el-input>
              </el-form-item>
              <el-form-item label="QQ">
                <el-input v-model="user_form.qq"></el-input>
              </el-form-item>
              <el-form-item label="微信">
                <el-input v-model="user_form.wechat"></el-input>
              </el-form-item>
              <el-form-item label="个人介绍">
                <el-input type="textarea" v-model="user_form.remark"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div v-else-if="menu_index=='2'">
            <el-form ref="pwd_form" :model="pwd_form" :rules="pwd_form_rules" label-width="150px">
              <el-form-item label="原密码" prop="old_password" key="old_password">
                <el-input type="password" v-model="pwd_form.old_password"></el-input>
              </el-form-item>
              <el-form-item label="新密码" prop="password" key="password">
                <el-input type="password" v-model="pwd_form.password"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="confirm_password" key="confirm_password">
                <el-input type="password" v-model="pwd_form.confirm_password"></el-input>
              </el-form-item>
              <el-form-item style="text-align: center">
                <el-button type="primary" @click="update_password('pwd_form')">确认</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div v-else-if="menu_index=='3'">
            <el-form ref="setting_form" :model="setting_form" label-width="150px">
              <span style="font-weight: bold">隐私设置<br><br></span>
              <el-form-item label="隐藏求职信息">
                <el-switch v-model="setting_form.isHidden" :active-value="1" :inactive-value="0" @change="submit_setting"></el-switch>
                <span>(个人求职信息不进入平台人才库推荐池中)</span>
              </el-form-item>
              <el-form-item label="个性化推荐">
                <el-switch v-model="setting_form.isRecommend" :active-value="1" :inactive-value="0" @change="submit_setting"></el-switch>
                <span>(允许平台根据用户习惯精准推荐职位)</span>
              </el-form-item>
              <el-divider></el-divider>
              <span style="font-weight: bold">屏蔽公司</span> <span>(您与屏蔽公司无法相互查看或推荐对方信息)</span><br><br>
              <el-row>
                <el-col :span="12">
                  <el-input v-model="search_key"></el-input>
                </el-col>
                <el-col :span="12">
                  <el-button type="primary">搜索</el-button>
                </el-col>
              </el-row>

              <div>
                <el-row>
                  <br><span>您已屏蔽{{shield_list.length}}家公司</span>
                  <el-button style="float: right" size="mini" type="success">批量管理</el-button>
                </el-row>
                <el-row v-for="i in shield_list" :key="i" style="margin-top: 10px">
                  <span style="color: #409EFF">{{i}}</span>
                  <el-button style="float: right" size="mini">解除屏蔽</el-button>
                </el-row>
              </div>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <Footer></Footer>
  </div>
</template>

<script>
  import HeaderByPerson from './HeaderByPerson'
  import Footer from './Footer'
  import md5 from 'js-md5';

  export default {
    name: 'Person',
    components: {HeaderByPerson, Footer},
    created () {
      this.$axios.post('http://localhost:8081/user/getUserById', {'id': this.$session.get('user').id}).then((res) => {
        const result = res.data
        if (result.code === '1') {
          this.user_form = result.data
          if (this.user_form.gender == 1) {
            this.user_form.gender_text = '男'
          } else if (this.user_form.gender == 2) {
            this.user_form.gender_text = '女'
          } else {
            this.user_form.gender_text = '保密'
          }
          this.pwd_form.id = this.user_form.id
        } else if (result.code === '0') {
          this.$message({message: result.msg, type: 'warning'})
        } else {
          this.$message.error(result.msg)
        }
      });
      this.$axios.post('http://localhost:8081/setting/getByUserId', {'userId': this.$session.get('user').id}).then((res) => {
        const result = res.data
        if (result.code === '1') {
          this.setting_form = result.data[0]
        } else if (result.code === '0') {
          this.$message({message: result.msg, type: 'warning'})
        } else {
          this.$message.error(result.msg)
        }
      });
    },
    data () {
      var validateOldPwd = (rule, value, callback) => {
        if (md5(value) !== this.user_form.password) {

          callback(new Error('密码不正确!'))
        } else {
          callback()
        }
      }
      var validatePwd = (rule, value, callback) => {
        if (value !== this.pwd_form.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        imageUrl: '',
        menu_index: '1',
        dialogVisible: false,
        update_form_button: false,
        user_form: {
          id: '',
          name: '',
          gender: '',
          birth: '',
          phone: '',
          email: '',
          qq: '',
          wechat: '',
          picture: '',
          remark: ''
        },
        pwd_form: {
          id: '',
          old_password: '',
          password: '',
          confirm_password: '',
        },
        pwd_form_rules: {
          old_password: [
            {required: true, message: '请输入旧密码', trigger: 'blur'},
            {min: 6, max: 16, message: '长度在 6 到 16 个字符之间', trigger: 'blur'},
            {validator: validateOldPwd, trigger: 'blur'},
          ],
          password: [
            {required: true, message: '请输入新密码', trigger: 'blur'},
            {min: 6, max: 16, message: '长度在 6 到 16 个字符之间', trigger: 'blur'}
          ],
          confirm_password: [
            {required: true, message: '请确认密码', trigger: 'blur'},
            {validator: validatePwd, trigger: 'blur'},
          ],
        },
        setting_form: {
          isHidden: 0,
          isRecommend: 1,
          userId: this.$session.get('user').id
          // company: '',
          // company_list: ['哇啦技术有限公司', '哇啦科技'],
        },
        search_key: '',
        search_value: '',
        shield_form: {
          userId: this.$session.get('user').id,
          companyId: this.search_value
        },
        shield_list: [

        ],
      }
    },
    methods: {
      handleAvatarSuccess (res, file) {
        this.imageUrl = URL.createObjectURL(file.raw)
      },
      beforeAvatarUpload (file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
      },
      change_index (index) {
        this.menu_index = index
      },
      submit_setting() {
        console.log(this.setting_form.isHidden)
        // return
        this.$axios.post('http://localhost:8081/setting/update', this.setting_form).then((res) => {
          const result = res.data
          if (result.code === '1') {
            // setTimeout(() => {
            //   this.$router.go(0)
            // }, 1000)
            this.$message({message: result.msg, type: 'success'})
          } else if (result.code === '0') {
            this.$message({message: result.msg, type: 'warning'})
          } else {
            this.$message.error(result.msg)
          }
        })
      },
      submit_user () {
        this.$axios.post('http://localhost:8081/user/updateUser', this.user_form).then((res) => {
          const result = res.data
          if (result.code === '1') {
            setTimeout(() => {
              this.$router.go(0)
            }, 1000)
            this.$message({message: result.msg, type: 'success'})
          } else if (result.code === '0') {
            this.$message({message: result.msg, type: 'warning'})
          } else {
            this.$message.error(result.msg)
          }
        })
      },
      update_password (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post('http://localhost:8081/user/updatePwd', this.pwd_form).then((res) => {
              const result = res.data
              if (result.code === '1') {
                setTimeout(() => {
                  this.user_form = null
                  this.$session.set('user', null)
                  this.$router.go(0)
                }, 1000)
                this.$message({message: '密码修改成功,请重新登录!', type: 'success'})
              } else if (result.code === '0') {
                this.$message({message: result.msg, type: 'warning'})
              } else {
                this.$message.error(result.msg)
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
